<!--
 * @Descripttion: 
 * @version: 
 * @Author: wtzhang
 * @Date: 2022-01-06 14:19:44
 * @LastEditors: wtzhang
 * @LastEditTime: 2022-01-06 14:23:01
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  @property --xPoint {
    syntax: '<length>';
    inherits: false;
    initial-value: 400px;
  }

  @property --yPoint {
    syntax: '<length>';
    inherits: false;
    initial-value: 300px;
  }

  .wrap {
    position: relative;
    margin: auto;
    width: 1000px;
    height: 600px;
    background:
      conic-gradient(from -45deg at var(--xPoint) var(--yPoint),
        rgba(102, 219, 255, 0.7),
        transparent 50%,
        hsla(219deg, 90%, 80%, .5) 100%),
      linear-gradient(-45deg, #060d5e, #002268);
    animation: pointMove 2.5s infinite alternate linear;
  }

  .shadow {
    position: absolute;
    top: -300px;
    left: -330px;
    width: 430px;
    height: 300px;
    background: #fff;
    transform-origin: 100% 100%;
    transform: rotate(225deg);
    clip-path: polygon(-100% 100%, 200% 100%, 200% 500%, -100% 500%);
    /* box-shadow: ... 此处省略大量阴影代码; */
    animation: scale 2.5s infinite alternate linear;
  }

  @keyframes scale {

    50%,
    100% {
      transform: rotate(225deg) scale(0);
    }
  }

  @keyframes pointMove {
    100% {
      --xPoint: 100px;
      --yPoint: 0;
    }
  }
</style>

<body>
  <div class="wrap">
    <div class="shadow"></div>
  </div>
</body>

</html>